<template>
    <div class="flex gap-16px">
        <!-- 左侧切换按钮 -->
        <div class="h-full w-80px flex-center left-wrapper">
            <n-icon-wrapper
                color="#e8e7e6"
                class="cursor-pointer"
                :size="48"
                :border-radius="50"
                @click="handlePrev()"
            >
                <n-icon :component="ChevronBack" :size="32" />
            </n-icon-wrapper>
        </div>
        <n-card class="w-600px h-600px overflow-scroll">
            <div class="py-10px flex-center">预约单信息</div>
            <n-list hoverable bordered>
                <n-list-item>
                    <n-thing
                        title="预约单号"
                        :title-extra="currentReservation?.id"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="创建时间"
                        :title-extra="new Date(currentReservation?.createdTime!).toLocaleString()"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="预约日期"
                        :title-extra="new Date(currentOrder?.requirement.reserveDate!).toLocaleDateString()"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="预约时间段"
                        :title-extra="`${currentOrder?.requirement.startTime}:00-${currentOrder?.requirement.endTime}:00`"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="预约会议室"
                        :title-extra="currentMeetingRoom?.name"
                    />
                </n-list-item>
            </n-list>
            <div class="py-10px flex-center">客户信息</div>
            <n-list hoverable bordered>
                <n-list-item>
                    <n-thing
                        title="预约客户"
                        :title-extra="currentCustomer?.username"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="联系电话"
                        :title-extra="currentCustomer?.phone"
                    />
                </n-list-item>
                <n-list-item>
                    <n-thing
                        title="客户公司"
                        :title-extra="currentCustomer?.companyName"
                    />
                </n-list-item>
            </n-list>
            <template v-if="model === 'reserve'">
                <div class="py-10px flex-center">订单信息</div>
                <n-list hoverable bordered>
                    <n-list-item>
                        <n-thing
                            title="订单号"
                            :title-extra="currentOrder?.id"
                        />
                    </n-list-item>
                    <n-list-item>
                        <n-thing title="订单金额">
                            <template #header-extra>
                                <n-tag type="primary">
                                    {{ currentOrder?.amount }} ￥
                                </n-tag>
                            </template>
                        </n-thing>
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="创建时间"
                            :title-extra="new Date(currentOrder?.createdTime!).toLocaleString()"
                        />
                    </n-list-item>
                    <n-list-item>
                        <n-thing
                            title="付款时间"
                            :title-extra="new Date(currentOrder?.paymentTime!).toLocaleString()"
                        />
                    </n-list-item>
                </n-list>
            </template>
        </n-card>
        <!-- 右侧切换按钮 -->
        <div class="h-full w-80px flex-center right-wrapper">
            <n-icon-wrapper
                color="#e8e7e6"
                class="cursor-pointer"
                :size="48"
                :border-radius="50"
                @click="handleNext()"
            >
                <n-icon :component="ChevronForward" :size="32" />
            </n-icon-wrapper>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from "vue";

import { ChevronBack, ChevronForward } from "@vicons/ionicons5";

import type { Order } from "@/service/api/types/reservation";
import type { Customer } from "@/service/api/types/user";
import type { MeetingRoom } from "@/service/api/types/room";
import type {
    Reservation,
    Cancellation,
} from "@/service/api/types/reservation";

import { getUserById } from "@/service/api/modules/user";
import { getOrderById } from "@/service/api/modules/order";
import { getMeetingRoomById } from "@/service/api/modules/room";
import { getReservationById } from "@/service/api/modules/reservation";

const props = defineProps<{
    model: "reserve" | "cancel";
    total: number;
    data: Reservation[] | Cancellation[];
}>();

const emits = defineEmits<{
    (e: "change", current: number): void;
}>();

const current = ref(1);

const orders = ref<Map<string, Order>>(new Map());
const customers = ref<Map<string, Customer>>(new Map());
const meetingRooms = ref<Map<string, MeetingRoom>>(new Map());
const reservations = ref<Map<string, Reservation>>(new Map());

const currentOrder = ref<Order>();
const currentCustomer = ref<Customer>();
const currentMeetingRoom = ref<MeetingRoom>();
const currentReservation = ref<Reservation>();
const currentCancellation = ref<Cancellation>();

// 查看预约单时获取更多信息
// 预约单信息 -> 订单信息 -> 客户信息 -> 会议室信息
const getReservationDetail = async () => {
    const current = currentReservation.value;
    if (!current) {
        return;
    }
    try {
        if (!orders.value.has(current.orderId!)) {
            const order = await getOrderById(current.orderId!);
            orders.value.set(current?.orderId!, order);
        }
        if (!customers.value.has(current.customerId!)) {
            const customer = await getUserById(current.customerId!);
            customers.value.set(current?.customerId!, customer as Customer);
        }
        if (!meetingRooms.value.has(current.roomId!)) {
            const meetingRoom = await getMeetingRoomById(current.roomId!);
            meetingRooms.value.set(current.roomId!, meetingRoom as MeetingRoom);
        }
        currentOrder.value = orders.value.get(current.orderId!);
        currentCustomer.value = customers.value.get(current.customerId!);
        currentMeetingRoom.value = meetingRooms.value.get(current.roomId!);
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};

// 查看取消单时获取更多信息
// 取消单信息 -> 预约单信息 -> 订单信息-> 客户信息
const getCancellationDetail = async () => {
    const current = currentCancellation.value;
    if (!current) {
        return;
    }
    try {
        if (!reservations.value.has(current.reservationId!)) {
            const reservation = await getReservationById(current.reservationId);
            reservations.value.set(current.reservationId, reservation);
        }
        if (!customers.value.has(current.customerId)) {
            const customer = await getUserById(current.customerId);
            customers.value.set(current.customerId, customer as Customer);
        }
        if (!orders.value.has(current.orderId!)) {
            const order = await getOrderById(current.orderId!);
            orders.value.set(current.orderId!, order);
        }
        currentCustomer.value = customers.value.get(current.customerId);
        currentReservation.value = reservations.value.get(
            current.reservationId
        );
    } catch (err) {
        window.NMessage.error((err as Error).message);
    }
};

const handleUpdateItem = async () => {
    if (props.model === "reserve") {
        currentReservation.value = props.data[current.value - 1] as Reservation;
        await getReservationDetail();
    } else {
        currentCancellation.value = props.data[
            current.value - 1
        ] as Cancellation;
        await getCancellationDetail();
    }
};

onMounted(async () => {
    await handleUpdateItem();
});

watch(
    () => props.data,
    async () => {
        try {
            handleUpdateItem();
        } catch (err) {
            window.NMessage.error((err as Error).message);
        }
    }
);

const handlePrev = async () => {
    if (current.value === 1) {
        return;
    }
    current.value--;
    handleUpdateItem();
    emits("change", current.value);
};

const handleNext = async () => {
    if (current.value === props.total) {
        window.NMessage.info("没有更多了");
        return;
    }
    current.value++;
    handleUpdateItem();
    emits("change", current.value);
};

const resetAll = () => {
    orders.value.clear();
    customers.value.clear();
    meetingRooms.value.clear();
    reservations.value.clear();

    currentOrder.value = undefined;
    currentCustomer.value = undefined;
    currentMeetingRoom.value = undefined;
    currentReservation.value = undefined;
    currentCancellation.value = undefined;

    current.value = 1;
};

defineExpose({
    resetAll,
    currentReservation,
});
</script>

<style scoped></style>
